<template>
    <div class="address">
        <el-page-header @back="goBack" content="收货地址">
        </el-page-header>
        <!-- 新增收货地址 -->
        <div class="add-address">
            <div class="title">新增收货地址</div>
            <el-form :model="form">
                <el-form-item>
                    <el-input placeholder="请输入内容" v-model="input1" 
                        maxlength="10"
                        show-word-limit>
                        <template slot="prepend">收货人姓名</template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-input placeholder="请输入内容" v-model="input1" 
                        maxlength="11"
                        show-word-limit>
                        <template slot="prepend">手机号</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="省/市/区">
                    <el-select v-model="select" placeholder="请选择">
                      <el-option label="1" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input placeholder="请输入内容" v-model="input1" 
                        maxlength="50"
                        show-word-limit>
                        <template slot="prepend">详细地址</template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-checkbox v-model="checked">设为默认地址</el-checkbox>
                    <el-button type="" style="float: right;">保存</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 已有收货地址列表 -->
        <div class="address-list">
            <div class="title">已有收货地址</div>
            <div>
                <el-table
                    :data="tableData"
                    height="250"
                    style="width: 100%">
                    <el-table-column
                        prop="name"
                        label="收货人姓名"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="phone"
                        label="手机号"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="address"
                        label="地址">
                    </el-table-column>
                    <el-table-column
                        prop="status"
                        label="是否默认地址">
                        <template slot-scope="scope">
                            <el-tag :type="scope.row.status == 1? '':'info'">
                                {{ scope.row.status == 1 ? '默认地址':'非默认地址' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作">
                        <template slot-scope="scope">
                            <el-button >编辑</el-button>
                            <el-button
                                size="mini"
                                type="danger">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

            </div>
        </div>
    </div>
</template>
<script>
export default{
    data(){
        return{
            form:{

            },
            tableData: [{
                status: 1,
                name: '王小虎',
                phone:'188234798',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                status: 0,
                name: '王小虎',
                phone:'188234798',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                status: 0,
                name: '王小虎',
                phone:'188234798',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                status: 0,
                name: '王小虎',
                phone:'188234798',
                address: '上海市普陀区金沙江路 1516 弄'
            }],

        }
    },
    created:{

    },
    methods:{
        goBack() {
            console.log('go back');
            this.$router.back();
        }
    }
}
</script>
<style scoped>
.address{
    background-color: #fff;
    padding: 15px 20px 40px;
}
.address .add-address{
    width: 50%;
    margin: 0 auto;
}
.address .address-list{
    width: 80%;
    margin: 0 auto;
}
.title{
    color: #0996eb;
    margin-left: 10px;
    margin-bottom: 10px;
}
</style>